<template>
    <div class="detail_appraise">
      <div class="appraise_item">
        <div>用户评价({{count}})</div>
        <div class="item_rate">
          <div><span>{{ goodNum }}</span>好评率</div><span>></span>
        </div>
      </div>
      <div class="appraise_info">
        <!-- 用户头像和名字 -->
        <div class="info_header">
          <div class="head_img">
            <img :src="userInfo.frontUserAvatar" alt="">
          </div>
          <div class="user_name">{{ userInfo.frontUserName }}</div>
        </div>
        <!-- 用户评论的时间 -->
        <div class="user_time">
          <span>{{appTime}}</span>
          <span>{{ userInfo.skuInfo }}</span>
        </div>
        <!-- 用户评论的信息 -->
        <div class="user_info">
          {{ userInfo.content }}
        </div>
        <!-- 评论的照片 -->
        <div class="user_img_list">
          <div class="list_item" v-for="item in imgList" :key="item">
            <img :src="item" alt="">
          </div>
        </div>
      </div>
    </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue"
  export default defineComponent({
    name:'Appraise',
  })
</script>

<script lang="ts" setup>
import { computed } from "vue";
const props = defineProps(['userInfo','count','goodNum'])


console.log(props);


const userInfo = computed(()=>{
    return props.userInfo[0] || {}
})
// console.log(userInfo.value);
// 评论时间
const appTime = computed(()=>{
   let time = new Date(props?.userInfo?.createTime)
   return time
})

// 评论的图片
const imgList = computed(()=>{
  let num = userInfo.value.picList.length
  // console.log(num,userInfo.value.picList.length);
  if(num>4){
    let arr =  userInfo.value.picList.slice(0,4)
    return arr
  }else{
    return userInfo.value.picList
  }
})


</script>

<style scoped>
/* 评价 */
.detail_appraise {
  padding: 10px 0 0px 10px;
  background-color: #fff;
}

.appraise_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.appraise_item div:first-of-type {
  flex: 2;
}

.appraise_item .item_rate {
  display: flex;
  flex: 1;
  align-items: center;
  color: 14px;
  text-align: right;
}
.appraise_item .item_rate span{
  display: inline-block;
  margin: 0 4px;
}

.appraise_item .item_rate div:first {
  flex: 1;
}

.appraise_item .item_rate div span {
  color: #f00;
}

/* 用户的评价信息 */
.appraise_info {
  /* padding-top: 10px; */
  padding-right: 15px;
  margin: 10px;
}

/* 用户头像 */
.appraise_info .info_header {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.appraise_info .info_header .head_img {
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 50%;
}
.appraise_info .info_header .head_img img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.appraise_info .info_header .user_name {
  margin-left: 10px;

}

/* 用户评论的时间 */
.appraise_info .user_time {
  margin-bottom: 10px;
}

.appraise_info .user_time span {
  margin-right: 6px;
  font-size: 12px;
  color: #aaa;
}

/* 评论的信息 */
.user_info {
  padding-right: 15px;
  font-size: 14px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 照片墙 */

.appraise_info .user_img_list {
  margin-top: 10px;
  padding-bottom: 15px;
  display: flex;
}

.user_img_list .list_item {
  width: 80px;
  /* background-color: aqua; */
  height: 80px;
  margin-right: 10px;
  border-radius: 10px;
}
.user_img_list .list_item img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.user_img_list .list_item:not(:first-child) {
  margin: 0 10px;
}

</style>